<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>receive</title>
<link type="text/css" rel="stylesheet" href="/css/themes/icon.css" />
<link type="text/css" rel="stylesheet"
	href="/css/themes/default/easyui.css" />
<script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/ajaxfileupload.js"></script>
<!-- <script type="text/javascript" src="../js/jquery/jquery.progressbar.min.js"></script> -->
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/resource.js"></script>
<script type="text/javascript" src="/js/uuid.js"></script>
<script type="text/javascript">
	var applyed_vhosts = new Array();
	$(document).ready(function() {
		$.ajax({
			async : false,
			type : "GET",
			url : "/vhost/find-all",
			success : function(data) {
				if (data instanceof Array) {
					applyed_vhosts = data;
				}
			}
		});

	});

	function FileUploader(eid) {
		var self = this;
		var fileElementID = eid;
		var formId = UUID.generate();
		var fileName = $("#" + eid).val();
		var fileID = fileElementID + "-" + fileName;
		var timer;
		var id = getUUID();
		var type;

		this.upload = function() {
			timer = setInterval(getProgress, 100);
			type = $("#app_type").combobox("getValue");
			$.ajaxFileUpload({
				url : '/app/upload', //需要链接到服务器地址
				secureuri : true,
				fileElementId : fileElementID, //文件选择框的id属性
				dataType : 'json', //服务器返回的格式，可以是json
				data : {
					formId : formId,
					name : $("#app_name").val(),
					app_type : type,
					resourcetype : "ApplicationResource",
					id : id,
					_id : id
				},
				success : function(data, status) {
					//alert("upload success!");
				},
				error : function(data, status, e) {
					alert("upload error!");
				}
			});
			//setTimeout(getProgress, 2000);
			//timer=window.setInterval('getProgress',2000);
		}

		function getProgress() {
			console.log("formId:" + formId);
			$.ajax({
				async : false,
				type : "GET",
				url : "/app/uploadprogress",
				data : {
					formId : formId,
					fieldName : fileElementID
				},
				success : function(data, state) {
					console.log("progress:" + data);
					showProgress(data);
				},
				error : function(err, state) {
					alert("progress err:" + state);
					clearInterval(timer);
				}
			});
		}

		function showProgress(p) {
			$("#progress-" + fileElementID).progressbar("setValue", p);
			if (parseFloat(p) >= 100) {
				clearInterval(timer);
				//getCurObject().applyVHost();
				$("#app_name").attr("disabled", true);
				$("#app_type").attr("disabled", true);
				$("#file1").attr("disabled", true);
				$("#warminfo").text("您以上传成功，需要申请相应的资源，才能部署运行！");
				$("#button1").hide();
				$("#button2").show();
				if (applyed_vhosts.length > 0) {
					$("#button3").show();
				}
				setCommonVariable("app_id", id);
				setCommonVariable("app_type", type);
			}
		}
	}

	function upload(eid) {
		var uploader = new FileUploader(eid);
		uploader.upload();
	}

	function applyVHost() {
		getCurObject().applyVHost();
	}

	function deployApp() {
		getCurObject().deployAndStart();
	}
</script>
<style type="text/css" rel="stylesheet">
* {
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
	<table align="center" height="100%" width="100%">
		<tr>
			<td colspan="2" nowrap="nowrap"></td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap">应用名:<input name="app_name"
				id="app_name" size="50" /></td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap">应用类型: <input name="app_type"
				id="app_type" class="easyui-combobox" name="language"
				data-options="data:application_type,
					valueField:'value',
					textField:'name',
					panelHeight:'auto'" />
			</td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap">负载类型: <input name="app_type"
				id="app_type" class="easyui-combobox" name="language"
				data-options="data:application_type,
					valueField:'value',
					textField:'name',
					panelHeight:'auto'" />
			</td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap" align="left">
				<div style="float: left;">
					选文件:<input type="file" name="file1" id="file1">
				</div>
				<div class="easyui-progressbar" id="progress-file1"
					style="width: 150px; float: left"></div>
			</td>
		</tr>
		<tr>
			<td colspan="2" nowrap="nowrap" align="left"><span
				style="color: #F00;" id="warminfo"></span></td>
		</tr>
		<tr>
			<td align="center">
				<button name="button1" id="button1" onclick="upload('file1')">上传</button>
				<button name="button2" id="button2" onclick="applyVHost()"
					style="display: none">申请主机资源</button>
			</td>
			<td align="center">
				<button name="button2" id="button3" onclick="deployApp()"
					style="display: none">部署到已申请主机</button>
			</td>
		</tr>
	</table>
</body>
</html>